<template>
    <div class="detail">
        <div class="gd-imgs">
            <div class="header">
              <a class="back">
                <van-icon name="wap-home-o" color="#fff" size="20px"/>
              </a>
              <a class='menu' @click="tonav">
                  <van-icon name="wap-nav" color="#000" size="20px"/>
              </a>
            </div>
            <ul>
                <li class="d-flex jc-c">
                <img v-bind:src="picPath"/>
                </li>
            </ul>
        </div>
        <div class="ginfo">
            <div class="pr">
                <div class="col">
                    <label class="gd-name">{{Drugname}}</label>
                </div>
            </div>
            <div class="pr">
                <div class="col">
                    <label class="caigou">采购价</label>
                    <label class="pri">
                        <label class="gd-price">认证可见</label>
                    </label>
                </div>
            </div>
            <div class="pr">
                <div class="col gd-spec">
                    <label>
                        <span>{{grain}}</span>
                        <em>0.3g*12粒*18板</em>
                    </label>
                </div>
            </div>
            <div class="pr gd-package">
                <div class="col">
                    <label>
                        <span>中包装</span>
                        <em class="m15">-</em>
                    </label>
                    <label>
                        <span>大包装</span>
                        <em class="m15">-</em>
                    </label>
                </div>
            </div>
            <div class="pr gd-retail">
                <div class="col">
                    <label class="lin">零售价</label>
                    <label class="m15">
                        <span>￥</span>
                        <span>{{price}}</span>
                        <span>（零售价仅供参考）</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="gd-active">
            <div class="row-075">
                <div class="col-center col-200">
                    <label class="act-txt">配送</label>
                </div>
                <div class="col-center ellipsis">
                    <label>满500.00起送，销售区域：江苏-南通</label>
                </div>
                <div class="col-center col-1625">
                    <i class="icmc-right">></i>
                </div>
            </div>
        </div>
        <div class="cmc-glevel">
            <div class="row-075">
                <div class="col-center col-200">
                    <label class="act-txt">数量</label>
                </div>
                <div class="col-center is-pop">
                    <span class="s-num tc">
                        <i class="icmc-minus">-</i>
                        <input type="text" value="1">
                        <i class="icmc-plus">+</i>
                    </span>
                </div>
                <div class="col-center col-1620">
                    <label class="f-98">
                        <span>库存</span>
                        <span>{{SalesVolume}}盒</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="cmc-glevel g-comm">
            <div class="row-p075 q">
                <div class="col-center">
                    <label class="act-txt">供货商</label>
                </div>
                <div class="col">
                    <label>{{company}}</label>
                </div>
            </div>
            <div class="row-p075 q">
                <div class="col-center">
                    <label>生产厂家</label>
                </div>
                <div class="col">
                    <label>{{label}}</label>
                </div>
            </div>
            <div class="row-p075 q">
                <div class="col-center">
                    <label>批准文号</label>
                </div>
                <div class="col">
                    <label>南南通健桥有限公司快批中心</label>
                </div>
            </div>
        </div>
        <div class="cmc-glevel g-conn">
            <div class="top">
                <div class="top-l topd">
                    <label class="top-l-lb">
                        <i></i>
                        <span>{{company}}</span>
                    </label>
                </div>
                <div class="top-r topd">
                    <label class="top-r-lb">
                        <span>进入商城</span>
                        <i></i>
                    </label>
                </div>
            </div>
            <div class="bottom">
                <div class="b-top">
                    <div class="b-top-l topd">
                        <label>经营范围</label>
                    </div>
                    <div class="b-top-r topd">
                        <label>
                            <span>化学原料药及制剂，进口分装药品，茶叶及相关制品，国产咖啡店恐龙快打离开了口袋里看到了快乐连连看发动机可可粉科技股份可广泛洛凯股份离开过分了kg法兰克福黄金矿工反馈过来看过分过分了开发那么快官方洛凯股份离开过分了kg法兰克福老师</span>
                        </label>
                    </div>
                </div>
                <div class="b-top1">
                    <div class="b-top1-l topd">
                        <label>联系地址</label>
                    </div>
                    <div class="b-top1-r topd">
                        <label>
                            fsff佛尔沟通会奇偶通话
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col tc">
                <label>cmc没有更多商品信息</label>
            </div>
        </div>
        <div class="footer">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="tokefu"/>
                <van-goods-action-icon icon="cart-o" text="购物车" info="5" @click="onClickIcon"/>
                <van-goods-action-icon icon="like-o" text="收藏" info="12" @click="onClickIcon"/>
                <van-goods-action-button type="warning" text="加入购物车" @click="addcart"/>
                <van-goods-action-button type="danger" text="立即购买" @click="onClickButton"/>
            </van-goods-action>
        </div>
        <ti-ps v-show="flag"></ti-ps>
    </div>
</template>
<script>
import { kindDetail, proFind, proDetail } from '@/utils/api'
import Vue from 'vue'
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Toast,
  Icon
} from 'vant'
Vue
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
  .use(Icon)
export default {
  data () {
    return {
      obj: [],
      SalesVolume: '',
      company: '',
      grain: '',
      kindid: '',
      label: '',
      picPath: '',
      price: '',
      Drugname: '',
      flag: false,
      nums: '0'
    }
  },
  methods: {
    onClickIcon () {
      //   Toast('点击图标')
      this.$router.push('/cart')
    },
    onClickButton () {
      Toast('点击按钮')
    },
    tokefu () {
      this.$router.push('kefu')
    },
    tonav () {
      Toast('点击按钮')
    },
    addcart () {
    //   this.loginStore().then(res => {
    //     if (res.code === '200') {
    //       Toast('请先登录')
    //       this.$router.push('/login')
    //     } else {
      Toast('加入购物车成功')
      let userid = localStorage.getItem('userid')
      let kindid = this.kindid
      let num = 1
      // console.log(userid)
      // console.log(kindid)
      proDetail(userid, kindid, num).then(res => {
      })
      proFind(userid).then(res => {
        if (res.data.length === 0) {
          this.nums = ''
        } else {
          this.nums = res.data.data.length
        }
      })
      // }
    //   })
    }
  },
  created () {
    let userid = localStorage.getItem('userid') || ''
    proFind(userid).then(res => {
      if (res.data.length === 0) {
        this.nums = ''
      } else {
        this.nums = res.data.length
      }
    })
    let kindid = this.$route.query.kindid
    kindDetail(kindid).then(res => {
      this.obj = res.data[0].data[0]
      this.SalesVolume = this.obj.SalesVolume
      this.company = this.obj.company
      this.grain = this.obj.grain
      this.kindid = this.obj.kindid
      this.label = this.obj.label
      this.picPath = this.obj.picPath
      this.price = this.obj.price
      this.Drugname = this.obj.Drugname
    })
  }

}
</script>
<style lang="scss" scoped>
.detail{
  height: 100%;
  background-color: #f6f6f6;
  overflow: auto;
}
.menu-list{
    display: none;
    width: 1.03rem;
    height: 1.6rem;
    background: #585c5f;
    border-radius: 0.05rem;
    ul{
        li{
            display: flex;
            width: 1.03rem;
            height: 0.4rem;
            padding: 0.07rem 0.15rem;
            border-bottom: 0.01rem solid #989898;
            a{
                position: relative;
                display: block;
                color: #000;
                .van-icon{
                    position: absolute;
                    display: inline-block;
                    margin-right: 0.1rem;
                    width: 0.15rem;
                    height: 0.15rem;
                    margin-top: 0.05rem;
                }
                span{
                    margin-left: 0.25rem;
                    display: flex;
                    display: inline-block;
                    font-size: 0.12rem;
                }
            }
        }
        .lali{
            border-bottom: none;
        }
    }
}
.header{
    display: flex;
    height:0.3rem;
    width: 100%;
    justify-content: space-between;
    padding: 0.1rem 0.15rem;
    position: absolute;
    top: 0.15rem;
    a{
        display:block;
        width: 0.3rem;
        height: 0.3rem;
        background: hsla(0,0%,40%,.6);
        border-radius: 50%;
        float:left;
        padding: 0.05rem;
    }
}
.gd-imgs{
    background-color: #fff;
    width: 100%;
    height: 2rem;
    position: relative;
    ul{
        width:100%;
        height:100%;
        li{
            list-style: none;
            height:100%;
            a{
                display: block;
                text-decoration: none;
                height:100%;
                img{
                    width: 2rem;
                    height: 100%;
                    display: block;
                    margin: 0 auto;
                }
            }
        }
    }
}
.ginfo{
    background-color: #fff;
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    height: 1.54rem;
    .pr{
        display: flex;
        margin-left: 0.1rem;
        .col{
            color: #989898;
            font-size: 0.12rem;
            padding:0.05rem;
            .gd-name{
                color:#030303;
                font-size: 0.16rem;
            }
            .caigou{
                font-size: 0.14rem;
                color: #030303;
            }
            .pri{
                font-size: 0.14rem;
                margin-left:0.15rem;
                color:#fff;
                .gd-price{
                    padding: 0.05rem 0.1rem;
                    border-radius: 0.15rem;
                    background: rgba(246,48,48,.8)
                }
            }
        }
        .gd-spec label{
            color: #989898;
            display: block;
        }
        .gd-spec em{
            margin-left: 0.05rem;
        }
        .m15{
            margin-left: 0.05rem;
        }
    }
    .gd-package label{
            margin-right: 0.15rem;
            color: #989898;
        }
}
.gd-active,.cmc-glevel{
    border-bottom: 0.01rem solid #f2f2f2;
    border-top: 0.01rem solid #f2f2f2;
    margin-top: 0.07rem;
    background-color: #fff;
    font-size:0.12rem;
    color:#030303;
    height: 0.38rem;
    .row-075{
        padding: 0.105rem 0.15rem;
        .col-center{
          float:left;
          margin-right: 0.12rem;
          .act-txt{
              font-size: .14rem;
          }
        }
        .ellipsis label{
            font-size: 0.12rem;
        }
        .col-1625{
            width: 0.325rem;
            height: 0.14rem;
            float: right;
            text-align: right;
            margin-right: 0;
            .icmc-right{
                height: 0.14rem;
                display: inline-block;
                font-size: 0.14rem;
                box-sizing: border-box;
                color: #989898;
                margin-right: 0.04rem;
            }
        }
    }
}
.cmc-glevel{
    height: 0.42rem;
    border-bottom: 0.01rem solid #f2f2f2;
    border-bottom: 0.01rem solid #f2f2f2;
    .row-075{
        height: 0.42rem;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 0.41rem;
    }
    .act-txt{
        font: 0.16rem;
    }
    .is-pop{
        width: 1.425rem;
        height: .32rem;
        padding: 0.05rem;
        .s-num{
            display:flex;
            width: 1.24rem;
            height: .32rem;
            text-align: center;
            border: 0.01rem solid #f2f2f2;
            border-radius: 0.03rem;
            .icmc-minus{
                width: .35rem;
                height: .3rem;
                line-height: .3rem;
                font-size: 0.28rem;
            }
            input{
                border: none;
                width: 0.52rem;
                height: .3rem;
                border-left: 0.01rem solid #f2f2f2;
                border-right: 0.01rem solid #f2f2f2;
                padding-left: 0.05rem;
                padding-right: 0.05rem;
                text-align:center;
            }
            .icmc-plus{
                width: .35rem;
                height: .3rem;
                line-height: .3rem;
                color: #f63030;
                font-size: 0.28rem;
            }
        }
    }
    .col-1620{
        text-align: right;
        width:1.386rem;
        margin-right:0rem;
        color: #989898;
    }
}
.g-comm{
    height:0.93rem;
    padding-top: 0.075rem;
    padding-bottom: 0.075rem;
    font-size: 0.16rem;
    color: #656565;
    .q{
        width: 3.75rem;
        height: 0.26rem;
        padding: 0.025rem 0.15rem;
        display: flex;
        align-items: center;
        .col-center{
            width: 0.9rem;
            height: 0.16rem;
            line-height: 0.16rem;
            float:left;
            font-size: 0.16rem;
        }
        .col{
            float:left;
            width: 2.65rem;
            height: 0.26rem;
            line-height: 0.26rem;
            font-size: 0.16rem;
            label{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.g-conn{
    height: 1.64rem;
    .top{
        width: 3.75rem;
        height: 0.44rem;
        padding:0.08rem 0.05rem 0.08rem 0.1rem;
        border-bottom: 0.01rem solid #f2f2f2;
        .top-l{
            width: 2.7rem;
            height: .27rem;
            padding: 0.05rem;
            .top-l-lb{
                i{
                    margin-right: 0.05rem;
                }
                span{
                    color: #656565;
                    font-size: 0.16rem;
                }
            }
        }
        .top-r{
            width: 0.9rem;
            height: 0.26rem;
            padding: 0.05rem;
            .top-r-lb{
                i{
                }
                span{
                    color: #f63030;
                    font-size: 0.18rem;
                }
            }
        }
    }
    .topd{
        float: left;
    }
    .bottom{
        padding: 0.05rem 0;
        height: 1.2rem;
        .b-top,.b-top1{
            padding: 0.1rem;
            width: 3.75rem;
            height: .84rem;
            .b-top-l{
                padding: 0.05rem;
                width:0.7rem;
                height: .64rem;
            }
            .b-top-r{
                padding: 0.05rem;
                width:2.85rem;
                height: .64rem;
                color: #989898;
                font-size: 0.12rem;
                label,span{
                    display: block;
                    width: 2.75rem;
                    height: .54rem;
                }
                span{
                overflow: hidden;
                text-overflow: ellipsis;
                }
            }
        }
        .b-top1{
            padding: 0.05rem 0.1rem;
            width: 3.75rem;
            height: .36rem;
            .b-top1-l{
              width: .7rem;
              height: .26rem;
            }
            .b-top1-r{
              width: 2.85rem;
              height: .24rem;
              color: #989898;
            }
        }
        .b-bot{
            width: 3.75rem;
            height: 0.36rem;
            padding: 0.05rem 0.1rem;
        }
    }
}
.footer{
        display: flex;
        width: 100%;
        height: 0.5rem;
    }
    .row{
        width: 3.75rem;
        height: .37rem;
        padding: 0.05rem;
        text-align: center;
        .tc{
            width: 3.65rem;
            height: .361rem;
            padding: 0.05rem;
            color: #989898;
            font-size: 0.12rem;
        }
    }
</style>
